<template>
	<view class="mine-container">
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="user-avatar-container">
				<image :src="userInfo.avatar || '/static/default-avatar.png'" class="user-avatar"></image>
				<view class="avatar-edit" @click="editAvatar">
					<uni-icons type="camera" size="20" color="#fff"></uni-icons>
				</view>
			</view>
			<view class="user-info">
				<text class="user-name">{{ userInfo.nickname || '未设置昵称' }}</text>
				<text class="user-join-date">加入时间: {{ formatDate(userInfo.createdAt) }}</text>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-list">
			<view class="menu-item" @click="goToCar">
				<image src="/static/icons/car-icon.png" mode="aspectFit" style="width:30px;height:30px"></image>
				<text class="menu-text">爱车管理</text>
				<image src="/static/icons/arrow-right.png" mode="aspectFit" style="width:30px;height:30px"></image>
			</view>
			<view class="menu-item" @click="goToCost">
				<!-- <view class="menu-icon">
					<uni-icons type="wallet" size="24" color="#7fbc8d"></uni-icons>
				</view> -->
				<image src="/static/icons/cost-icon.png" mode="aspectFit" style="width:30px;height:30px"></image>
				<text class="menu-text">费用统计</text>
				<image src="/static/icons/arrow-right.png" mode="aspectFit" style="width:30px;height:30px"></image>
			</view>
			
			

			<view class="menu-item" @click="goToRecordList">
				<image src="/static/icons/record-icon.png" mode="aspectFit" style="width:30px;height:30px"></image>
				<text class="menu-text">加油记录</text>
				<image src="/static/icons/arrow-right.png" mode="aspectFit" style="width:30px;height:30px"></image>
			</view>

			<view class="menu-item" @click="goToAbout">
				<image src="/static/icons/about-icon.png" mode="aspectFit" style="width:30px;height:30px"></image>
				<text class="menu-text">关于中博纳油耗</text>
				<image src="/static/icons/arrow-right.png" mode="aspectFit" style="width:30px;height:30px"></image>
			</view>
		</view>

		<!-- 退出按钮 -->
		<view class="logout-btn" @click="handleLogout">
			<text>退出登录</text>
		</view>
	</view>
</template>

<script>
	import {
		useStore
	} from 'vuex'
	import {
		computed
	} from 'vue'
	import dayjs from 'dayjs'

	export default {
		setup() {
			const store = useStore()
			const userInfo = computed(() => store.state.userInfo || {})

			const formatDate = (date) => {
				return date ? dayjs(date).format('YYYY年MM月DD日') : '--'
			}

			const editAvatar = () => {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0]
						// 这里应该调用上传接口并更新用户信息
						store.commit('SET_USER_INFO', {
							...userInfo.value,
							avatar: tempFilePath
						})
					}
				})
			}

			const goToCost = () => {
				uni.switchTab({
					url: '/pages/cost/index'
				})
			}
			


			const goToCar = () => {
				uni.navigateTo({
					url: '/pages/car/car'
				})
			}

			const goToRecordList = () => {
				uni.navigateTo({
					url: '/pages/record/list'
				})
			}

			const goToAbout = () => {
				uni.navigateTo({
					url: '/pages/about/index'
				})
			}

			const handleLogout = () => {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							store.dispatch('logout')
						}
					}
				})
			}

			return {
				userInfo,
				formatDate,
				editAvatar,
				goToCost,
				goToCar,
				goToRecordList,
				goToAbout,
				handleLogout
			}
		}
	}
</script>

<style scoped>
	.mine-container {
		padding: 30rpx;
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.user-card {
		display: flex;
		align-items: center;
		background-color: white;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.user-avatar-container {
		position: relative;
		margin-right: 30rpx;
	}

	.user-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: #f0f0f0;
	}

	.avatar-edit {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		background-color: #7fbc8d;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.user-info {
		flex: 1;
	}

	.user-name {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
	}

	.user-join-date {
		font-size: 26rpx;
		color: #999;
	}

	.menu-list {
		background-color: white;
		border-radius: 20rpx;
		overflow: hidden;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.menu-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.menu-item:last-child {
		border-bottom: none;
	}

	.menu-icon {
		width: 60rpx;
		text-align: center;
		margin-right: 20rpx;
	}

	.menu-text {
		flex: 1;
		font-size: 32rpx;
		color: #333;
	}

	.logout-btn {
		background-color: white;
		color: #ff4d4f;
		text-align: center;
		padding: 30rpx;
		border-radius: 20rpx;
		font-size: 32rpx;
		font-weight: bold;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}
</style>